<template>
  <div>
    <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="showAddSalaryInfoView">添加工资单</el-button>
        <el-button type="success" icon="el-icon-download" @click="exportToExcel">导出Excel</el-button>
      </div>
      <el-input
        v-model="searchKeyword"
        placeholder="请输入员工ID搜索"
        style="width: 200px"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
    </div>
    
    <el-table :data="salaryInfoList" border stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="employeeId" label="员工ID" width="80"></el-table-column>
      <el-table-column label="员工信息" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.employee">
            <div>姓名：{{ scope.row.employee.name }}</div>
            <div>部门：{{ scope.row.employee.department ? scope.row.employee.department.name : '' }}</div>
            <div>职位：{{ scope.row.employee.position ? scope.row.employee.position.name : '' }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="工资配置" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.salary">
            <div>基本工资：{{ scope.row.salary.basicSalary }}</div>
            <div>奖金：{{ scope.row.salary.bonus }}</div>
            <div>午餐补贴：{{ scope.row.salary.lunchSalary }}</div>
            <div>交通补贴：{{ scope.row.salary.trafficSalary }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salaryMonth" label="工资月份" width="100"></el-table-column>
      <el-table-column prop="basicSalary" label="基本工资" width="100"></el-table-column>
      <el-table-column prop="performanceSalary" label="绩效工资" width="100"></el-table-column>
      <el-table-column prop="overtimePay" label="加班费" width="100"></el-table-column>
      <el-table-column prop="others" label="其他补贴" width="100"></el-table-column>
      <el-table-column prop="utilityDeduction" label="水电费扣除" width="100"></el-table-column>
      <el-table-column prop="workingDays" label="工作天数" width="100"></el-table-column>
      <el-table-column prop="leaveHours" label="请假时数" width="100"></el-table-column>
      <el-table-column prop="payableSalary" label="应发工资" width="100"></el-table-column>
      <el-table-column prop="socialInsuranceDeduction" label="社保扣除" width="100"></el-table-column>
      <el-table-column prop="housingFundDeduction" label="住房公积金扣除" width="100"></el-table-column>
      <el-table-column prop="tax" label="个人所得税" width="100"></el-table-column>
      <el-table-column prop="actualSalary" label="实发工资" width="100"></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="showEditSalaryInfoView(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteSalaryInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px">
    </el-pagination>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="salaryInfo" :rules="rules" ref="salaryInfoForm" label-width="120px">
        <el-form-item label="员工ID" prop="employeeId">
          <el-input v-model="salaryInfo.employeeId" placeholder="请输入员工ID" type="number"></el-input>
        </el-form-item>
        <el-form-item label="工资月份" prop="salaryMonth">
          <el-date-picker
            v-model="salaryInfo.salaryMonth"
            type="month"
            placeholder="请选择工资月份"
            value-format="yyyy-MM"
            format="yyyy-MM"
            :clearable="false"
            :editable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="基本工资" prop="basicSalary">
          <el-input v-model="salaryInfo.basicSalary" placeholder="请输入基本工资" type="number"></el-input>
        </el-form-item>
        <el-form-item label="绩效工资" prop="performanceSalary">
          <el-input v-model="salaryInfo.performanceSalary" placeholder="请输入绩效工资" type="number"></el-input>
        </el-form-item>
        <el-form-item label="加班费" prop="overtimePay">
          <el-input v-model="salaryInfo.overtimePay" placeholder="请输入加班费" type="number"></el-input>
        </el-form-item>
        <el-form-item label="其他补贴" prop="others">
          <el-input v-model="salaryInfo.others" placeholder="请输入其他补贴" type="number"></el-input>
        </el-form-item>
        <el-form-item label="水电费扣除" prop="utilityDeduction">
          <el-input v-model="salaryInfo.utilityDeduction" placeholder="请输入水电费扣除" type="number"></el-input>
        </el-form-item>
        <el-form-item label="工作天数" prop="workingDays">
          <el-input v-model="salaryInfo.workingDays" placeholder="请输入工作天数" type="number"></el-input>
        </el-form-item>
        <el-form-item label="请假时数" prop="leaveHours">
          <el-input v-model="salaryInfo.leaveHours" placeholder="请输入请假时数" type="number"></el-input>
        </el-form-item>
        <el-form-item label="社保扣除" prop="socialInsuranceDeduction">
          <el-input v-model="salaryInfo.socialInsuranceDeduction" placeholder="请输入社保扣除" type="number"></el-input>
        </el-form-item>
        <el-form-item label="住房公积金扣除" prop="housingFundDeduction">
          <el-input v-model="salaryInfo.housingFundDeduction" placeholder="请输入住房公积金扣除" type="number"></el-input>
        </el-form-item>
        <el-form-item label="个人所得税" prop="tax">
          <el-input v-model="salaryInfo.tax" placeholder="请输入个人所得税" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="salaryInfo.remarks" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitSalaryInfo">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SalTable",
  data() {
    return {
      salaryInfoList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchKeyword: '',
      dialogVisible: false,
      dialogTitle: '添加工资单',
      rules: {
        employeeId: [
          { required: true, message: '请输入员工ID', trigger: 'blur' },
          { type: 'number', message: '员工ID必须为数字', trigger: 'blur', transform: (value) => Number(value) }
        ],
        salaryMonth: [
          { required: true, message: '请选择工资月份', trigger: 'change' }
        ],
        basicSalary: [
          { required: true, message: '请输入基本工资', trigger: 'blur' }
        ],
        performanceSalary: [
          { required: true, message: '请输入绩效工资', trigger: 'blur' }
        ],
        overtimePay: [
          { required: true, message: '请输入加班费', trigger: 'blur' }
        ],
        others: [
          { required: true, message: '请输入其他补贴', trigger: 'blur' }
        ],
        utilityDeduction: [
          { required: true, message: '请输入水电费扣除', trigger: 'blur' }
        ],
        workingDays: [
          { required: true, message: '请输入工作天数', trigger: 'blur' }
        ],
        leaveHours: [
          { required: true, message: '请输入请假时数', trigger: 'blur' }
        ],
        socialInsuranceDeduction: [
          { required: true, message: '请输入社保扣除', trigger: 'blur' }
        ],
        housingFundDeduction: [
          { required: true, message: '请输入住房公积金扣除', trigger: 'blur' }
        ],
        tax: [
          { required: true, message: '请输入个人所得税', trigger: 'blur' }
        ]
      },
      salaryInfo: {
        employeeId: null,
        salaryMonth: '',
        basicSalary: 0,
        performanceSalary: 0,
        overtimePay: 0,
        others: 0,
        utilityDeduction: 0,
        workingDays: 0,
        leaveHours: 0,
        payableSalary: 0,
        socialInsuranceDeduction: 0,
        housingFundDeduction: 0,
        tax: 0,
        actualSalary: 0,
        remarks: ''
      }
    }
  },
  mounted() {
    this.initSalaryInfoList();
  },
  methods: {
    initSalaryInfoList() {
      this.getRequest("/salary/info/page?page=" + this.currentPage + "&size=" + this.pageSize + 
        (this.searchKeyword ? "&employeeId=" + this.searchKeyword : "")).then(resp => {
        if (resp) {
          this.salaryInfoList = resp.records;
          this.total = resp.total;
        }
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.initSalaryInfoList();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.initSalaryInfoList();
    },
    handleSearch() {
      this.currentPage = 1;
      this.initSalaryInfoList();
    },
    showAddSalaryInfoView() {
      this.dialogTitle = '添加工资单';
      this.salaryInfo = {
        employeeId: null,
        salaryMonth: '',
        basicSalary: 0,
        performanceSalary: 0,
        overtimePay: 0,
        others: 0,
        utilityDeduction: 0,
        workingDays: 0,
        leaveHours: 0,
        payableSalary: 0,
        socialInsuranceDeduction: 0,
        housingFundDeduction: 0,
        tax: 0,
        actualSalary: 0,
        remarks: ''
      };
      this.dialogVisible = true;
    },
    showEditSalaryInfoView(data) {
      this.dialogTitle = '编辑工资单';
      this.salaryInfo = JSON.parse(JSON.stringify(data));
      this.dialogVisible = true;
    },
    submitSalaryInfo() {
      this.$refs.salaryInfoForm.validate((valid) => {
        if (valid) {
          if (this.salaryInfo.id) {
            this.putRequest("/salary/info", this.salaryInfo).then(resp => {
              if (resp) {
                this.dialogVisible = false;
                this.initSalaryInfoList();
              }
            });
          } else {
            this.postRequest("/salary/info", this.salaryInfo).then(resp => {
              if (resp) {
                this.dialogVisible = false;
                this.initSalaryInfoList();
              }
            });
          }
        }
      });
    },
    deleteSalaryInfo(data) {
      this.$confirm('此操作将永久删除该工资单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/salary/info/" + data.id).then(resp => {
          if (resp) {
            this.initSalaryInfoList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    exportToExcel() {
      this.$confirm('是否導出所有工資單信息？', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.getRequest("/salary/info/export", {}, 'blob').then(resp => {
          if (resp) {
            const blob = new Blob([resp], { type: 'application/vnd.ms-excel' });
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = '工资单信息.xlsx';
            link.click();
            window.URL.revokeObjectURL(link.href);
            this.$message({
              type: 'success',
              message: '導出成功！'
            });
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '導出失敗：' + (error.message || '未知錯誤')
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消導出'
        });
      });
    }
  }
}
</script>

<style scoped>
</style>